//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

/* ==========================================================================
   Radio Buttons

   Default Mendix Radio Button Widget
========================================================================== */

.mx-radiobuttons.inline .mx-radiogroup {
    display: flex;
    flex-direction: row;
    .radio {
        margin: 0 20px 0 0;
    }
}
.mx-radiobuttons .radio:last-child {
    margin-bottom: 0;
}

.radio {
    display: flex !important; // Remove after mxui merge
    align-items: center;
    margin-top: 0;
}

input[type='radio'] {
    position: relative !important; // Remove after mxui merge
    width: 16px;
    height: 16px;
    margin: 0;
    cursor: pointer;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;

    &:before,
    &:after {
        display: block;
        position: absolute;
        border-radius: 50%;
        transition: all 0.3s ease;
    }
    &:before {
        content: '';
        width: 100%;
        height: 100%;
        border: 1px solid $form-input-border-color;
        background-color: transparent;
    }
    &:after {
        width: 55%;
        height: 55%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: $form-input-border-focus-color;
        pointer-events: none;
    }
    &:not(:checked):after {
        opacity: 0;
        transform: translate(-50%, -50%), scale(0);
    }
    &:not(:disabled):not(:checked):hover:after {
        background-color: $form-input-bg-hover;
    }
    &:checked:after,
    &:not(:disabled):not(:checked):hover:after {
        opacity: 1;
        content: '';
        transform: translate(-50%, -50%), scale(1);
    }
    &:checked:before {
        border-color: $form-input-border-focus-color;
        background-color: $form-input-bg;
    }
    &:disabled:before {
        background-color: $form-input-bg-disabled;
    }
    &:checked:disabled:before {
        border-color: rgba($form-input-border-focus-color, 0.4);
    }
    &:checked:disabled:after {
        background-color: rgba($form-input-border-focus-color, 0.4);
    }
    & + label {
        margin-left: $form-label-gutter;
    }
}
